﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <div class="cont">
        <div>
            <a href="javascript:;">body &gt; div.cont &gt; a</a>
        </div>
        <ul>
            <li>
                <p>body &gt; div.cont &gt; ul &gt; li &gt; p</p>
            </li>
            <li class="a1">
                <span>body &gt; div.cont &gt; ul &gt; li.a1 &gt; span</span>
            </li>
            <li class="a1">
                <span>body &gt; div.cont &gt; ul &gt; li.a1 &gt; span</span>
            </li>
            <li class="a1">
                <span>body &gt; div.cont &gt; ul &gt; li.a1 &gt; span</span>
            </li>
            <li class="a2">
                <span>body &gt; div.cont &gt; ul &gt; li.a2 &gt; span</span>
            </li>
            <li>
                <span>body &gt; div.cont &gt; ul &gt; li &gt; span</span>
            </li>
            <li>
                <span>body &gt; div.cont &gt; ul &gt; li &gt; span</span>
            </li>
            <li>
                <span>body &gt; div.cont &gt; ul &gt; li &gt; span</span>
            </li>
        </ul>
        <hr />
        <form action="/" method="post">
            <h3>登录表单</h3>
            <p>用户名：<input type="text" name="username" /></p>
            <p>密码：<input type="password" name="password" /></p>
            <button>确定登录</button>
        </form>
        <hr />
        <a href="javascript:;" onclick="javascript:test();">
            测试按钮
        </a>
    </div>
    <script>

        function test() {
            // 一、单个节点获取
            // document.getElementById("id")
            // document.querySelector(".t>ul>li")

            // Element 对象更改样式操作
            // var ele1 = document.querySelector('#ele1>span');
            // ele1.style.fontSize = '14px';
            // ele1.style.color = '#f00';

            // 二、多个节点获取
            //  1、 方法1：(Element对象数组)
            var li1 = document.getElementsByClassName('a1');    // 通过 class 获取 Element 的集合（数组）
            var li2 = document.getElementsByName('username');   // 通过 name 获取，通常用在表单元素上
            var li3 = document.getElementsByTagName('span');    // 通过标签名获取

            console.debug('li1:', li1);
            console.debug('li2:', li2);
            console.debug('li3:', li3);

            // 2、方法2：使用选择器获取
            var li4 = document.querySelectorAll('.t>ul>li');    // 选择器和 css 选择器相同，使用简单，功能强大
            console.debug('li4:', li4);
        }


    </script>
</body>
</html>